<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { UserApi } from '@/api/UserApi.ts'
import { ProblemApi } from '@/api/ProblemApi.ts'
import { OrganizationApi } from '@/api/OrganizationApi.ts'
import { ImageApi } from '@/api/ImageApi.ts'
import { ReloadOutlined, UserOutlined, TeamOutlined, ProfileOutlined, PictureOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const router = useRouter()

const loading = ref(false)
const userTotal = ref(0)
const problemTotal = ref(0)
const organizationTotal = ref(0)
const imageTotal = ref(0)

const fetchCounts = async () => {
  loading.value = true
  try {
    const [userRes, problemRes, orgRes, imgRes] = await Promise.all([
      UserApi.search({ id: null, account: null, gender: null, pageNumber: 1, pageSize: 1 } as any),
      ProblemApi.searchByAdmin({ title: null, difficulty: null, createdUserId: null, visible: null, pageNumber: 1, pageSize: 1 } as any),
      OrganizationApi.search({ name: null, status: null, pageNumber: 1, pageSize: 1 } as any),
      ImageApi.search({ id: null, type: null, enabled: null, pageNumber: 1, pageSize: 1 }),
    ])
    userTotal.value = Number(userRes?.totalRow || 0)
    problemTotal.value = Number(problemRes?.totalRow || 0)
    organizationTotal.value = Number(orgRes?.totalRow || 0)
    imageTotal.value = Number(imgRes?.totalRow || 0)
  } catch (e) {
    console.error(e)
    message.error('获取统计信息失败')
  } finally {
    loading.value = false
  }
}

onMounted(fetchCounts)

const gotoManage = (name: string) => {
  router.push({ name })
}
</script>

<template>
  <div class="w-full">
    <a-card
      title="管理中心总览"
      class="w-full rounded-lg shadow-sm"
      :bodyStyle="{ padding: '24px' }"
      :loading="loading"
    >
      <div class="mb-4 flex justify-between items-center">
        <div class="text-gray-500">系统关键数据总览</div>
        <a-tooltip title="刷新">
          <a-button
            @click="fetchCounts"
            :shape="'default'"
            class="w-9 h-9 p-0 flex items-center justify-center"
          >
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button>
        </a-tooltip>
      </div>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="12" :lg="6">
          <a-card :bodyStyle="{ padding: '16px' }" class="rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
                <UserOutlined />
              </div>
              <div class="flex-1">
                <div class="text-gray-500 text-sm">用户总数</div>
                <div class="text-2xl font-semibold">{{ userTotal }}</div>
              </div>
            </div>
            <div class="mt-4 text-right">
              <a-button type="link" @click="gotoManage('UserManage')">前往管理</a-button>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="12" :lg="6">
          <a-card :bodyStyle="{ padding: '16px' }" class="rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-full bg-green-50 text-green-600 flex items-center justify-center">
                <ProfileOutlined />
              </div>
              <div class="flex-1">
                <div class="text-gray-500 text-sm">题目总数</div>
                <div class="text-2xl font-semibold">{{ problemTotal }}</div>
              </div>
            </div>
            <div class="mt-4 text-right">
              <a-button type="link" @click="gotoManage('ProblemManage')">前往管理</a-button>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="12" :lg="6">
          <a-card :bodyStyle="{ padding: '16px' }" class="rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-full bg-purple-50 text-purple-600 flex items-center justify-center">
                <TeamOutlined />
              </div>
              <div class="flex-1">
                <div class="text-gray-500 text-sm">组织总数</div>
                <div class="text-2xl font-semibold">{{ organizationTotal }}</div>
              </div>
            </div>
            <div class="mt-4 text-right">
              <a-button type="link" @click="gotoManage('OrganizationManage')">前往管理</a-button>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="12" :lg="6">
          <a-card :bodyStyle="{ padding: '16px' }" class="rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-12 h-12 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center">
                <PictureOutlined />
              </div>
              <div class="flex-1">
                <div class="text-gray-500 text-sm">图片总数</div>
                <div class="text-2xl font-semibold">{{ imageTotal }}</div>
              </div>
            </div>
            <div class="mt-4 text-right">
              <a-button type="link" @click="gotoManage('ImagesManage')">前往管理</a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<style scoped>

</style>
